<template>
  <div class="home" style="max-width: 1200px; margin: 0 auto;">
    <h1 class="center">博客系统</h1>
    <p>
      <el-button type="primary" @click="categoryClick('')">全部</el-button>
      <el-button v-for="item in categoryList" type="primary" @click="categoryClick(item.title)">{{ item.title }}</el-button>
    </p>
    <hr>
    <div v-for="item in list" style="border: 1px solid #efefef; border-radius: 8px; box-shadow: 0 0 4px #ccc; margin-top: 20px; margin-bottom: 20px; padding: 20px;">
      <h4>{{item.title}} - {{item.tag}}</h4>
      <p>
        <small>{{item.createdAt}}</small>
      </p>
      <div>
        <pre style="white-space: break-spaces;">{{item.content}}</pre>
      </div>
      <br>
      <br>
      <br>
    </div>
    <hr>
    <div class="center">
      <el-pagination
          background
          layout="prev, pager, next"
          @current-change="pageChange"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'Home',
  data() {
    return {
      list: [],
      tag: "",
      categoryList: [],
      page: 1,
      total: 0
    }
  },
  mounted() {
    axios.get("/category/").then(res=>{
      this.categoryList = res.data;
    })

    this.tag = ''
    this.getData()
  },
  methods: {
    getData() {
      axios.get("/article/page?orderById=true&tag="+this.tag+"&number=" + this.page).then(res=>{
        this.list = res.data.records
        this.page = res.data.current
        this.total = res.data.total
      })
    },
    categoryClick(item) {
      this.page = 1;
      this.tag = item;
      this.getData()
    },
    pageChange(val) {
      this.page = val;
      this.getData()
    }
  }
}
</script>

<style scoped>
.center {
  text-align: center;
}
</style>